
<template>
  <div class="video">
    <!--    <button @click="playVideo">播放</button>-->
    <div :id="specialId" class="my-player"></div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';

let _this;
const { JSPlugin } = window;

export default {
  name: 'videoWSS',
  props: {
    // wss url
    cameraWssUrl: {
      type: Array,
    },
    defineWidth: {
      type: String,
      default: '100%'
    },
    defineHeight: {
      type: String,
      default: '100%'
    },
    splitNum: {
      type: Number
    },
    mode: {
      type: Number,
      default: 1
    },
    specialId: {
      type: String
    }
  },
  setup(props) {
    const player = ref(null);
    const muted = ref(false);

    const playback = {
      startTime: '2021-07-26T00:00:00',
      endTime: '2021-07-26T23:59:59',
      seekStart: '2021-07-26T12:00:00',
      rate: '',
    };

    onMounted(() => {
      _this = props;
      init();
      createPlayer();
    });

    onUnmounted(() => {
      stopAllPlay();
    });

    watch(
        () => props.cameraWssUrl,
        (newValue, oldValue) => {
          init();
          createPlayer();
        },
        { deep: true }
    );

    const init = () => {
      window.addEventListener('resize', () => {
        player.value.JS_Resize();
      });
    };

    const createPlayer = () => {
      player.value = new JSPlugin({
        szId: props.specialId,
        szBasePath: './js/',
        iMaxSplit: 4,
        iCurrentSplit: props.splitNum,
        openDebug: true,
        iWidth: props.defineWidth,
        iHeight: props.defineHeight,
        oStyle: {
          border: '#343434',
          borderSelect: '#FFCC00',
          background: '#000',
        },
      });

      player.value.JS_SetWindowControlCallback({
        windowEventSelect: function (iWndIndex) {
          console.log('windowSelect callback: ', iWndIndex);
        },
        pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
          console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
        },
        // 其他事件回调...
      });
    };

    const playVideo = () => {
      nextTick(() => {
        let mode = props.mode;
        const url = props.cameraWssUrl;
        url.forEach((item, index) => {
          if (
              (item.hkDu === '大华' && item.flowType === '1') ||
              (item.hkDu === '海康' && item.flowType === '1')
          ) {
            mode = 0;
          } else if (
              (item.hkDu === '大华' && item.flowType === '2') ||
              (item.hkDu === '海康' && item.flowType === '2')
          ) {
            mode = 1;
          } else {
            mode = props.mode;
          }
          const urlWss = item.url ? item.url : item;
          player.value.JS_Play(urlWss, { playURL: urlWss, mode }, index).then(
              () => {
                console.info('播放视频success', item);
              },
              (err) => {
                console.error('播放视频err', err);
              }
          );
        });
      });
    };

    const stopPlay = () => {
      player.value.JS_Stop(player.value.currentWindowIndex).then(
          () => {
            playback.rate = 0;
            console.log('stop realplay success');
          },
          (e) => {
            console.error(e);
          }
      );
    };

    const stopAllPlay = () => {
      player.value.JS_StopRealPlayAll().then(
          () => {
            playback.rate = 0;
            console.log('stopAllPlay success');
          },
          (e) => {
            console.error(e);
          }
      );
    };

    return {
      player,
      muted,
      playback,
      playVideo,
      stopPlay,
      stopAllPlay,
    };
  },
};
</script>

<style>
.my-player {
  position: relative;
}
.draw-window, .play-window {
  position: relative !important;
  top: auto !important;
  left: auto !important;
}
</style>
